<template>
  <!--  厂家设备管理-->
  <div class="page">
    <div class="page_main" style="padding-bottom: 6vw">
      <div style="display: flex;align-items: flex-start;justify-content:space-between;flex-wrap: wrap">
        <el-card class="topCard" v-for="item in dataList" :key="item.title"
                 style="width: 23%;box-sizing: border-box;padding: 1%;height: 372px;overflow-y: auto">
          <div style="display: flex;justify-content: space-between;align-items: center">
            <h4 style="width: 50%;   color: #494949;font-size: 120%">{{item.name}}</h4>
            <h4>{{item.num}}</h4>
          </div>
          <div v-for="child in item.itemList" :key="child.id" style="margin: 1vw 0;cursor: pointer"
               @click.stop="toRouter(item.name,child)">
            <div>
              <div style="display: flex;justify-content: flex-start;align-items: center">
                <h6 style="width: 30%;color: #494949;">{{child.name}}</h6>
                <h6 style="width: 40%;color: #228AF5" :style="child.code| firstColorFont(item.name)">{{child.num}}</h6>
                <h6 style="width: 10% ;color: #228AF5" :style="child.code| firstColorFont(item.name)">
                  {{(child.num/item.num*100).toFixed(2)}}%</h6>
              </div>
              <el-progress :percentage="child.num/item.num*100"
                           :color="child.code| firstColor(item.name) "></el-progress>
            </div>
          </div>
        </el-card>
      </div>
      <!--   配置文件个数   -->
      <div style="width: 100vw;height: 50vh;margin-top: 2vw">
        <el-row style="width: 100%;height: 100%" :gutter="20">
          <el-col style="height: 100%" :span="11">
            <devaice-echart-pie ref="devaiceEchartPie" @changeDatePzwj="changeDatePzwj"></devaice-echart-pie>
          </el-col>
          <el-col :span="11">
            <el-card class="pieCard"
                     style="width: 80%;box-sizing: border-box;padding: 1%;height: 372px;overflow-y: auto">
              <div style="display: flex;justify-content: space-between;align-items: center">
                <h4 style="width: 50%;   color: #494949;font-size: 120%">{{list.name}}</h4>
                <h4>关联的设备数量：{{list.num}}个</h4>
                <el-button class="common_btn-defalut" @click="toConfigVersion(list.versionName,list)">查看详情</el-button>
              </div>
              <el-row v-if="(Object.keys(list).length !== 0) ">
                <el-col :span="8">
                  <p>版本名称：</p>
                  <p>说明：</p>
                  <p>采样周期：</p>
                  <p>存储间隔：</p>
                  <p>上报间隔：</p>
                  <p>预估上报间隔：</p>
                  <p>重启周期：</p>
                  <p>报警周期：</p>
                  <p>位移mm：</p>
                  <p>雷达mm：</p>
                  <p>水位cm：</p>
                  <p>倾角°：</p>
                </el-col>
                <el-col :span="16">
                  <p>{{list.versionName}}</p>
                  <p>{{list.explanation}}</p>
                  <p>{{list.sampleCycle /60}}分钟</p>
                  <p>{{list.storeInterval}}</p>
                  <p>{{list.reportInterval}}</p>
                  <p> {{((list.sampleCycle * list.storeInterval * list.reportInterval)/60).toFixed(1)}}
                    分钟</p>
                  <p>{{list.rebootCycle}}</p>
                  <p>{{list.alarmCycle}}</p>
                  <p>{{list.wyjThreshold}}mm</p>
                  <p>{{list.jgyThreshold}}mm</p>
                  <p>{{list.swjThreshold}}cm</p>
                  <p>{{list.accThreshold}}°</p>
                </el-col>

              </el-row>
              <p v-else>暂无相关数据</p>
            </el-card>
          </el-col>
        </el-row>
      </div>
      <!--授权公司-->
      <div style="width: 100vw;height: 50vh">
        <el-row style="width: 100%;height: 100%" :gutter="20">
          <el-col style="height: 100%" :span="11">
            <devaice-echart-pie @changeDateSqgs="changeDateSqgs" ref="devaiceEchartPie2"></devaice-echart-pie>
          </el-col>
          <el-col :span="11">
            <el-card
              style="width:80%;box-sizing: border-box;padding: 1%;height: 372px;overflow-y: auto">
              <div style="display: flex;justify-content: space-between;align-items: center">
                <h4 style="width: 60%;   color: #494949;font-size: 120%">{{listSqgs.name}}</h4>
                <h4>授权的设备数量：{{listSqgs.num}}套</h4>
                <!--                <el-button class="common_btn-defalut" @click="toDeviceRoot(listSqgs.id)">查看详情</el-button>-->
              </div>
              <div v-for="child in listSqgs.itemList" :key="child.id" style="margin: 1vw 0;cursor: pointer"
                  >
                <div>
                  <div style="display: flex;justify-content: flex-start;align-items: center">
                    <h6 style="width: 30%;color: #494949;">{{child.name}}</h6>
                    <h6 style="width: 40%;color: #228AF5" :style="child.code| firstColorFont(listSqgs.name)">
                      {{child.num}}</h6>
                    <h6 style="width: 10% ;color: #228AF5" :style="child.code| firstColorFont(listSqgs.name)">
                      {{(child.num/listSqgs.num*100).toFixed(2)}}%</h6>
                  </div>
                  <el-progress :percentage="child.num/listSqgs.num*100"
                               :color="child.code| firstColor(listSqgs.name) "></el-progress>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
      <!-- 电压-->
      <div style="width: 80vw;height: 80vh">
        <el-date-picker
          style="width:20%;min-width:240px;height: 40px"
          size="small"
          value-format="timestamp"
          v-model="timerArray"
          type="daterange"
          :picker-options="pickerOptions"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期" :clearable="false">
        </el-date-picker>
        <el-select v-model="formDl.id" placeholder="请选择设备SN" clearable style="min-width: 40vw;margin-left:1vw" filterable>
          <el-option
            v-for="item in equipList"
            :key="item.sn"
            :label="item.sn"
            :value="item.id">
          </el-option>
        </el-select>
        <el-button style="margin-left: 1vw" class="common_btn-defalut" icon="el-icon-search" @click="queryList_dl()">搜索</el-button>
        <devaice-echart-line  ref="devaiceEchartLine"></devaice-echart-line>
      </div>
    </div>
    <x-loading v-show="isLoading"></x-loading>

  </div>
</template>
<script>
  import {
    equipEchart, configQueryList, equipQueryVoltageList,getEquipDataList
  } from '@/services/model/sensor'
  import XLoading from '@/components/animation/x-loading.vue'
  import DevaiceEchartPie from "./devaice-echart-pie";
  import DevaiceEchartLine from "./devaice-echart-line";

  const timer = 30 * 24 * 3600 * 1000
  const Echarts = require('echarts')
  export default {
    components: {XLoading, DevaiceEchartPie, DevaiceEchartLine},
    data() {
      return {
        list: {},
        listSqgs: {},
        isLoading: false,
        tableList_DL: [],//电路
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        form: {
          page: 1,
          pageSize: 10,
          total: 0,
        },
        formDl: {
          id:'',
          startCreateTime: Date.parse(new Date()) - timer,
          endCreateTime: Date.parse(new Date()),
        },
        tableList: [],
        equipList:[],//设备列表
        dataList: [],
        sqgsList: [],//授权公司
        pzwjList: {},//配置文件
      }
    },
    computed: {
      // 时间赛选
      // 时间筛选
      timerArray: {
        get() {
          return [this.formDl.startCreateTime, this.formDl.endCreateTime]
        },
        set([startTimer, endTimer]) {
          this.formDl.startCreateTime = startTimer
          this.formDl.endCreateTime = endTimer
        }
      },
      // true  监测单位显示
      isAuthority() {
        return this.$store.state.userInfo.unitType === 4
      }
    },
    filters: {
      firstColor(val, type) {  //
        if (type == '设备信号' || type == '设备电压') {
          switch (val) {
            case 1:
              return '#e43321'
            case 2:
              return '#5082FB'
            case 3:
              return '#FFC557'
            case 4:
              return '#3CC891'
          }
        }
        if (type == '设备状态') {
          switch (val) {
            case 0:
              return '#909399'
            case 1:
              return '#0073b7'
            case 2:
              return '#f39c12'
            case 3:
              return '#0DC26B'
            case 4:
              return '#e43321'
            default:
              return '#03a9f4'
          }
        }
      },
      firstColorFont(val, type) {
        if (type == '设备信号' || type == '设备电压') {
          switch (val) {
            case 1:
              return 'color:#e43321'
            case 2:
              return 'color:#5082FB'
            case 3:
              return 'color:#FFC557'
            case 4:
              return 'color:#3CC891'
          }
        }
        if (type == '设备状态') {
          switch (val) {
            case 0:
              return 'color:#909399'
            case 1:
              return 'color:#0073b7'
            case 2:
              return 'color:#f39c12'
            case 3:
              return 'color:#0DC26B'
            case 4:
              return 'color:#e43321'
            default:
              return 'color:#03a9f4'
          }
        }
      },
    },
    methods: {
      changeTime() {
      },
      //授权公司数据过滤
      changeDateSqgs(value) {
        this.listSqgs = {}
        this.sqgsList.itemList.map(x => {
          if (x.name === value.name) {
            this.listSqgs = x
            this.listSqgs.name = value.name
            this.listSqgs.num = value.value
          }
        })
      },
      //配置文件数据过滤
      changeDatePzwj(value) {
        this.list={}
        this.tableList.map(x => {

          if (x.versionName === value.name) {
            this.list = x
            this.list.name = value.name
            this.list.num = value.value
          }
        })

      },
      toDeviceRoot(id) {
        this.$router.push({
          path: '/device-root',
          query: {authDeptTreeId: id}
        })
      },
      toConfigVersion(versionName,list) {
        this.$router.push({
          path: '/s-w-j',
          query: {configId: list.id}
        })
      },
      toRouter(name, child) {
        let data={}
        if (name == '设备状态') {
          data={testStatus: child.code}
        }
        if(name=='设备型号'){
          data={modelId:child.id}
        }
        if(name=='设备电压'){
          data= {equipVoltage:child.code}
        }
        if(name=='设备信号'){
          data= {equipSignal:child.code}
        }
        this.$router.push({
          path: '/s-w-j',
          query:data
        })
      },
      async queryList_pzwj() {
        this.list = {}
        this.tableList = []
        let res = await configQueryList(this.form)
        this.tableList = res.data?.records || []
        this.list = this.tableList[0]
      },
      async getEquipList() {
        this.equipList = []
        let res = await getEquipDataList()
        this.equipList = res.data || []
      },

      async queryList_dl() {
        this.tableList_DL = {}
        let res = await equipQueryVoltageList(this.formDl)
        this.tableList_DL = res.data || {}
        this.$refs.devaiceEchartLine.updateEchart( this.tableList_DL ,['vol','sol'])

      },
      async queryList() {
        this.isLoading = true
        // 由于在前端进行过滤，所以name不能传到后端
        let res = await equipEchart()
        res.data.map((x, index) => {
          if (index < 4) {
            this.dataList.push(x)
          } else if (x.name == '配置文件') {
            this.pzwjList = x
            this.list.name = x.name
            this.list.num = x.num
          } else if (x.name === '授权公司') {
            this.sqgsList = x
            this.listSqgs = x.itemList[0]
          }
        })
        this.$refs.devaiceEchartPie.updateEchart(this.pzwjList)
        this.$refs.devaiceEchartPie2.updateEchart(this.sqgsList)
        this.isLoading = false
      }
    },
    mounted() {
      this.queryList_pzwj()
      this.getEquipList()
      this.queryList()
    }
    ,
    activated() {
    }
  }
</script>
<style lang="less" scoped>
  .pieCard {
    height: 100% !important;

    .el-row {
      margin-top: 1vw;
      font-size: 1vw;
    }

    .el-col {
      p {
        margin-bottom: 0.5vw;
      }
    }

    .el-col-8 {
      font-weight: 600;
      color: #7b7b7b;
    }
  }

  h6 {
    color: #9c9c9c;
  }

  /deep/ .el-progress__text {

    display: none;
  }

  /*设置小的滚动条样式*/
  .topCard::-webkit-scrollbar {
    width: 4px;
    /*height: 4px;*/
  }

  .topCard::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2) !important;
    background: #228AF5;
  }

  .topCard::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 0;
    background: rgba(255, 255, 255, 1);
  }
</style>
